import { Link } from 'react-router-dom'
import { memo } from 'react'

const HeaderMenu = memo(({ currentUser }) => {
    if (currentUser) {
        return (
            <ul className="nav navbar-nav pull-xs-right">
                <li className="nav-item">
                    <Link to='/' className="nav-link">
                    <i className="fa fa-home"></i>&nbsp;主页
                    </Link>
                </li>
                <li className="nav-item">
                    <Link to='/article/new' className="nav-link">
                    <i className="fa fa-file-code-o"></i>&nbsp;创作
                    </Link>
                </li>
                <li className="nav-item">
                    <Link to='/setting' className="nav-link">
                    <i className="fa fa-gears"></i>&nbsp;设置
                    </Link>
                </li>
                <li className="nav-item">
                    <Link to={`/${currentUser.usernanme}/profile`} className="nav-link">
                        <img src={currentUser.avatar || 'https://gu0nuli.github.io/reactStatic/react_static/v1_111.jpg'} className="user-pic" />
                        {currentUser.usernanme}
                    </Link>
                </li>
            </ul>
        )
    } else {
        return (
            <ul className="nav navbar-nav pull-xs-right">
                <li className="nav-item">
                    <Link to='/' className="nav-link">
                    <i className="fa fa-home"></i>&nbsp;主页
                    </Link>
                </li>
                <li className="nav-item">
                    <Link to='/login' className="nav-link">
                    <i className="fa fa-sign-in"></i>&nbsp;登录
                    </Link>
                </li>
                <li className="nav-item">
                    <Link to='/regist' className="nav-link">
                    <i className="fa fa-key"></i>&nbsp;注册
                    </Link>
                </li>
            </ul>
        )
    }
})

export default HeaderMenu

